<template>
  <view class="flex-item" @click="goShopDetail">
    <img class="pic" :src="obj.skuImg">
    <view class="shopName">{{ obj.skuName }}</view>
    <view class="price">￥<text>{{ Number(obj.salePrice).toFixed(2) }}</text></view>
    <view class="price_row">
      <view class="specs">{{ obj.skuNum || 0 }}个规格</view>
      <view class="shop_cart" @click.stop="handleAddShopping(obj)">
        <img src="/static/image/shopping_cart.png" alt="添加购物车">
      </view>
    </view>
    <view class="pro">
      <text v-if="obj.activityType == 10" class="pro-img t-icon t-icon-tejia_tongyong_1" />
      <text v-else-if="obj.activityType == 20" class="pro-img t-icon t-icon-cuxiao_tongyong_1" />
    </view>
    <!-- 规格选择popup - 相关变量和方法均在addShoppingCartMixin混入中 -->
    <SelectSpecPopup
      :speci-show.sync="speciPopup.show"
      :shop-num.sync="speciPopup.purchaseNum"
      :default-shop-num.sync="speciPopup.minOrderNum"
      :order-limit-type.sync="speciPopup.orderLimitType"
      :detail-info="speciPopup.details"
      :new-sku-infos="speciPopup.skuInfo"
      :sale-flag="speciPopup.isNotSale"
      @addShopCar="addPurchaseOrder"
      @buy="purchaseNow"
      @changeSpeci="changeSpecSelect"
    />
  </view>
</template>

<script>
import SelectSpecPopup from '@/components/select-spec-popup/index'
import addShoppingCartMixin from '@/shopDetail/addShoppingCartMixin'
export default {
  components: { SelectSpecPopup },
  mixins: [addShoppingCartMixin],
  props: {
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    goShopDetail(item) {
      uni.navigateTo({
        url: '/shopDetail/index?spuCode=' + this.obj.spuCode
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.flex-item {
  width: 100%;
  background: #FFFFFF;
  border-radius: 8rpx;
  padding-bottom: 24rpx;
  box-sizing: border-box;
  overflow: hidden;
  .pic{
    width: 334rpx;
    height: 334rpx;
  }
  .shopName {
    padding: 0rpx 24rpx;
    color: rgba(0,0,0,1);
    font-size: 24rpx;
    font-weight: 400;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    line-height: 36rpx;
  }
  .price {
    padding: 0rpx 24rpx;
    box-sizing: border-box;
    margin-top: 16rpx;
    font-size: 28rpx;
    color: #FF5533;
    display: flex;
    align-items: flex-end;
    text {
      font-size: 32rpx;
      color: rgba(255,85,51,1);
      font-weight: 700;
    }
  }
  .pro {
    display: flex;
    padding: 0rpx 24rpx;
    box-sizing: border-box;
    margin-top: 8rpx;
    image {
      width: 64rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }
  }
  .specs {
    color: rgba(170,170,170,1);
    font-size: 24rpx;
    font-weight: 400;
    padding: 0rpx 6rpx;
    box-sizing: border-box;
    margin-top: 16rpx;
  }
  .price_row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 12rpx;
    padding: 0 24rpx;
    .shop_cart {
      img {
        display: block;
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
